<template>
	<view class="mine-container">
		<view class="mine-main">
			<view class="mine-header fc">
				<u-avatar :src="userInfo.avatar || ''" size="128rpx"></u-avatar>
				<view class="mine-header-value flex-col">
					<view class="nickname">{{ userInfo.realname || '--' }}</view>
					<view class="font-24">
						{{ userInfo.roleName || '--' }}
					</view>
				</view>
			</view>

			<view class="cell-group">
				<view v-for="(item, index) in menus" :key="index" class="cell" @tap="handleRouter(item)">
					<cc-image width="36rpx" height="36rpx" :src="getImage(item.icon)"></cc-image>
					<view class="flex-1 cell-label">{{ item.label }}</view>
					<cc-image width="32rpx" height="32rpx" :src="getImage('arrow-right')"></cc-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Gitee,
		GitHub
	} from '@/env.js';
	export default {
		data() {
			return {
				menus: [{
						label: '个人信息',
						url: '/userinfo',
						icon: 'min-account'
					},
					{
						label: '排课管理',
						url: '/class-rule',
						icon: 'min-calendar'
					},
					{
						label: '上课管理',
						url: '/attend-list',
						icon: 'min-attend-0'
					},
					{
						label: 'Gitee',
						href: Gitee,
						icon: 'https://uviewui.com/common/gitee.svg'
					}, {
						label: 'GitHub',
						href: GitHub,
						icon: 'https://uviewui.com/common/github.svg'
					}
				]
			};
		},
		onLoad() {
			this.initPage();
		},
		methods: {
			async initPage() {
				await this.$store.dispatch('GetInfo');
			},
			handleRouter(item) {
				if (item.href) {
					window.location.href = item.href;
				} else if (item.url) {
					this.$Router.push({
						path: item.url,
						query: item.query || {}
					});
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>